<template>
    <popup ref="popupRef" title="客群库" :async="true" :confirmButtonText="false" width="60%">
        <!-- 客户群未绑定提示页面 -->
        <div v-if="!userUseFlag" class="unbind-notice">
            <div class="unbind-content">
                <div class="unbind-icon">
                    <el-icon>
                        <Warning />
                    </el-icon>
                </div>
                <h3 class="unbind-title">客户群未绑定</h3>
                <p class="unbind-description">
                    该客户群尚未绑定到您的账户，无法查看详细信息。
                    <br>
                    请联系管理员进行客户群绑定操作。
                </p>
            </div>
        </div>

        <!-- 客户群已绑定内容 -->
        <div v-else>
            <el-card class="!border-none" shadow="never" style="max-height: 500px; overflow-y: auto;">
                <div class="mb-3 text-left total-count flex items-center">

                    <!-- 客户群信息卡片 -->
                    <div class="customer-info-cards">
                        <div class="info-card">
                            <div class="info-card-icon">
                                <el-icon>
                                    <User />
                                </el-icon>
                            </div>
                            <div class="info-card-content">
                                <div class="info-card-label">客户群名称</div>
                                <div class="info-card-value">{{ customerInfo.name || '未知' }}</div>
                            </div>
                        </div>

                        <div class="info-card">
                            <div class="info-card-icon total">
                                <el-icon>
                                    <UserFilled />
                                </el-icon>
                            </div>
                            <div class="info-card-content">
                                <div class="info-card-label">客户群总数</div>
                                <div class="info-card-value">{{ customerInfo.total || 0 }}</div>
                            </div>
                        </div>

                        <div class="info-card">
                            <div class="info-card-icon pushed">
                                <el-icon>
                                    <Check />
                                </el-icon>
                            </div>
                            <div class="info-card-content">
                                <div class="info-card-label">客户群已投放总数</div>
                                <div class="info-card-value">{{ customerInfo.pushed || 0 }}</div>
                            </div>
                        </div>

                        <div class="info-card">
                            <div class="info-card-icon ads">
                                <el-icon>
                                    <Promotion />
                                </el-icon>
                            </div>
                            <div class="info-card-content">
                                <div class="info-card-label">广告已投放</div>
                                <div class="info-card-value">{{ customerInfo.ads || 0 }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex items-center mb-6">
                    <el-input v-model="searchKeyword" placeholder="搜索微信号" prefix-icon="el-icon-search" clearable
                        @input="handleSearch">
                        <template #prefix>
                            <el-icon>
                                <Search />
                            </el-icon>
                        </template>
                    </el-input>

                    <el-select v-model="pushStatusFilter" placeholder="投放状态" class="ml-3" style="width: 200px;"
                        @change="handleStatusFilter">
                        <el-option label="全部" value="" />
                        <el-option label="已投放" value="1" />
                        <el-option label="未投放" value="0" />
                    </el-select>

                    <el-button type="primary" class="ml-3" @click="batchCopyWechat" :loading="copyLoading">
                        <el-icon class="mr-2">
                            <Upload />
                        </el-icon>
                        重新投放
                    </el-button>
                </div>

                <el-table :data="filteredList" height="450" header-align="center" v-loading="loading">
                    <el-table-column label="微信号" align="center" prop="code"></el-table-column>
                    <el-table-column label="投放状态" align="center">
                        <template #default="{ row }">
                            <el-tag :type="row.is_push === 1 ? 'success' : 'info'"
                                :effect="row.is_push === 1 ? 'dark' : 'plain'">
                                {{ row.is_push === 1 ? '已投放' : '未投放' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </div>
    </popup>
</template>

<script setup lang="ts">
import { Search, View, Hide, Download, CopyDocument, User, UserFilled, Check, Promotion, Warning, Link, Upload } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { usePaging } from '@/hooks/usePaging'
import { getAudienceLibrary, audience_library_retry } from '@/api/tencent_advertising_user_ad_list'


const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('wechat_list')
const props = defineProps({
    id: String
})
// 添加loading状态
const loading = ref(false)
// 存储所有数据
const allData = ref<any[]>([])
// 搜索关键词
const searchKeyword = ref('')
// 投放状态过滤器
const pushStatusFilter = ref('')
// 控制是否显示所有微信号
const showAllWechat = ref(false)
// 导出加载状态
const exportLoading = ref(false)
// 复制加载状态
const copyLoading = ref(false)

const userUseFlag = ref(true)
// 客户群信息
const customerInfo = ref({
    name: '',
    total: 0,
    pushed: 0,
    ads: 0
})


// 过滤后的数据
const filteredList = computed(() => {
    let filtered = allData.value

    // 关键词搜索过滤
    if (searchKeyword.value) {
        filtered = filtered.filter(item =>
            item.code && item.code.toLowerCase().includes(searchKeyword.value.toLowerCase())
        )
    }

    // 投放状态过滤
    if (pushStatusFilter.value !== '') {
        filtered = filtered.filter(item =>
            item.is_push === parseInt(pushStatusFilter.value)
        )
    }

    return filtered
})

/**
 * 处理搜索功能
 */
const handleSearch = () => {
    // 搜索功能已通过计算属性实现，这里不需要额外处理
}

/**
 * 处理投放状态过滤
 */
const handleStatusFilter = () => {
    // 状态过滤功能已通过计算属性实现，这里不需要额外处理
}


/**
 * 重新投放功能
 */
const batchCopyWechat = async () => {
    copyLoading.value = true
    try {
        const res = await audience_library_retry({
            id: props.id,
        })
        // 更新客户群信息
        if (res) {
            ElMessage.success('任务已加入投放队列')
            getAllLists()
        }
    } catch (error: any) {
        // ElMessage.error(error.msg)
        console.error('重新投放失败:', error)
    } finally {
        copyLoading.value = false
    }
}

/**
 * 获取所有微信号列表数据
 */
const getAllLists = async () => {
    loading.value = true
    try {
        const res = await getAudienceLibrary({
            id: props.id,
            page: 1,
            limit: 9999 // 设置一个较大的值，一次获取所有数据
        })
        allData.value = res.list || []

        // 更新客户群信息
        if (res) {
            customerInfo.value = {
                name: res.library.title || '未知客户群',
                total: res.count || 0,
                pushed: res.library_use || 0,
                ads: res.use || 0
            }
            userUseFlag.value = res.is_bind || false
        }
    } catch (error) {
        console.error('获取微信号列表失败:', error)
    } finally {
        loading.value = false
    }
}


const open = (type = 'placement_log') => {
    mode.value = type
    popupRef.value?.open()
}

onMounted(() => {
    getAllLists()
    open()
})

defineExpose({
    open
})
</script>

<style scoped>
.search-container {
    padding: 0 10px;
}

.search-container .el-input {
    max-width: 300px;
}

/* 未绑定提示页面样式 */
.unbind-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 40px 20px;
}

.unbind-content {
    text-align: center;
    max-width: 400px;
}

.unbind-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 32px;
    color: #f59e0b;
}

.unbind-title {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 16px;
}

.unbind-description {
    font-size: 16px;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 32px;
}

/* 客户群信息卡片样式 */
.customer-info-cards {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    width: 100%;
}

.info-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    flex: 1;
    min-width: 0;
}

.info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border-color: #3b82f6;
}

.info-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    background: linear-gradient(135deg, #10b981, #34d399);
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);
    flex-shrink: 0;
}

.info-card-icon.total {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.3);
}

.info-card-icon.pushed {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.3);
}

.info-card-icon.ads {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
    box-shadow: 0 3px 10px rgba(139, 92, 246, 0.3);
}

.info-card-content {
    flex: 1;
    min-width: 0;
}

.info-card-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info-card-value {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .customer-info-cards {
        flex-direction: column;
        gap: 8px;
    }

    .info-card {
        min-width: auto;
    }

    .info-card-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .info-card-value {
        font-size: 16px;
    }
}

.total-count {
    font-size: 16px;
    padding-left: 10px;
    color: #606266;
}

.total-count .text-primary {
    font-size: 18px;
    color: #409EFF;
}

.eye-button {
    font-size: 16px;
    width: 24px;
    height: 24px;
    padding: 0;
}

.eye-button .el-icon {
    font-size: 16px;
}
</style>


<style scoped>
/* 配置统计样式 */
.config-stats-container {
    display: flex;
    gap: 12px;
    margin-left: 16px;
    align-items: center;
}

.config-stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    transition: all 0.3s ease;
    min-width: 140px;
    height: 32px;
}

.config-stat-item:hover {
    background: #f1f5f9;
    border-color: #3b82f6;
}

.config-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
    background: linear-gradient(135deg, #10b981, #34d399);
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);
    flex-shrink: 0;
}

.config-stat-icon.available {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.3);
}

.config-stat-content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.config-stat-label {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.config-stat-value {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.current-count {
    color: #10b981;
}

.separator {
    color: #9ca3af;
    font-weight: 500;
}

.total-count {
    color: #6b7280;
    font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .config-stats-container {
        flex-direction: column;
        gap: 12px;
        margin-left: 0;
        margin-top: 12px;
    }

    .config-stat-item {
        min-width: auto;
        width: 100%;
    }
}
</style>